<template>
  <div class="f_body">
    <img
      v-for="(item, index) in list"
      :key="index"
      :src="item.status == 1 ? treePath : treeOverPath"
      alt=""
      :style="{ left: item.x + 'px', top: item.y + 'px' }"
      @click="imgClick(item)"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      treePath: require("@/assets/image/tree.png"),
      treeOverPath: require("@/assets/image/tree_over.png"),
      list: [
        {
          x: 615,
          y: 465,
          number: "F-YS-002",
          status: 1,
        },
        {
          x: 625,
          y: 534,
          number: "F-GB-012",
          status: 1,
        },
        {
          x: 623,
          y: 562,
          number: "F-GB-014",
          status: 1,
        },
        {
          x: 635,
          y: 581,
          number: "F-YH-017",
          status: 1,
        },
        {
          x: 635,
          y: 542,
          number: "F-GB-013",
          status: 1,
        },
        {
          x: 632,
          y: 524,
          number: "F-XL-011",
          status: 1,
        },
        {
          x: 630,
          y: 510,
          number: "F-XL-010",
          status: 1,
        },
        {
          x: 628,
          y: 475,
          number: "F-GB-007",
          status: 1,
        },
        {
          x: 635,
          y: 470,
          number: "F-HL-006",
          status: 1,
        },
        {
          x: 655,
          y: 588,
          number: "F-GH-021",
          status: 1,
        },
        {
          x: 650,
          y: 460,
          number: "F-YS-004",
          status: 1,
        },
        {
          name: "311",
          x: 653,
          y: 470,
          number: "F-HL-005",
          status: 1,
        },
        {
          x: 678,
          y: 565,
          number: "F-PT-025",
          status: 1,
        },
        {
          x: 685,
          y: 585,
          number: "F-GH-024",
          status: 1,
        },
        {
          x: 706,
          y: 585,
          number: "F-GH-027",
          status: 1,
        },
        {
          x: 703,
          y: 565,
          number: "F-PT-026",
          status: 1,
        },
        {
          x: 728,
          y: 582,
          number: "F-GH-028",
          status: 1,
        },
        {
          x: 752,
          y: 580,
          number: "F-YH-035",
          status: 1,
        },
        {
          x: 754,
          y: 533,
          number: "F-XL-032",
          status: 1,
        },
        {
          x: 758,
          y: 523,
          number: "F-XL-033",
          status: 1,
        },
        {
          x: 761,
          y: 513,
          number: "F-GH-034",
          status: 1,
        },
        {
          x: 800,
          y: 570,
          number: "F-YS-038",
          status: 1,
        },
        {
          x: 795,
          y: 593,
          number: "F-GB-036",
          status: 1,
        },
        {
          x: 815,
          y: 585,
          number: "F-YS-037",
          status: 1,
        },
        {
          x: 835,
          y: 590,
          number: "F-YS-040",
          status: 1,
        },
        {
          x: 830,
          y: 573,
          number: "F-YS-039",
          status: 1,
        },
        {
          x: 880,
          y: 588,
          number: "F-YS-041",
          status: 1,
        },
        {
          x: 885,
          y: 573,
          number: "F-XS-042",
          status: 1,
        },
        {
          x: 900,
          y: 588,
          number: "F-YS-043",
          status: 1,
        },
        {
          x: 930,
          y: 585,
          number: "F-GH-044",
          status: 1,
        },
      ],
    };
  },
  props: ["documentHeight", "listData"],
  computed: {},
  watch: {
    listData: {
      handler(newV) {
        newV.map((x) => {
          this.list.map((j, i) => {
            if (x.number == j.number) {
              j = { ...j, ...x };
              this.$set(this.list, i, j);
            }
          });
        });
      },
      deep: true,
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const ratio = (this.documentHeight * 4) / 812;
      const xOffset = -80;
      const yOffset = -60;
      this.list.map((item) => {
        item.x = item.x * ratio + xOffset * ratio;
        item.y = item.y * ratio + yOffset * ratio;
      });
    },
    imgClick(item) {
      this.poi = item;
      this.$emit("imgClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.f_body {
  img {
    position: absolute;
    top: 70px;
    width: 20px;
    height: 20px;
  }
}
</style>
